  <!-- 代码实现 -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>知识树图实现</title>
        <style type="text/css">
            /* 圈圈节点样式 */
            .node circle{
                fill: #fff;
                stroke: steelblue;
                stroke-width:1.5px;
                margin-top: 20px;
                margin-bottom: 20px;
            }
            /* 文字样式 */
            .node text{
                font-size: 14px;
                margin-top: 20px;
                margin-bottom: 20px;
            }
            /* 连线的样式 */
            .link{
                fill: none;
                stroke: #ccc;
                stroke-width: 1.5px;
            }
        </style>
    </head>
    <body>

        <!-- 0.引入d3.js库 -->
        <script src="./lib/d3.v3.js"></script>
        <script type="text/javascript">

            // 1、 选中页面给页面添加svg标签；设置Svg绘制区域的宽和高；添加g元素(svg的group分组标签元素)并设置位置。
            var width = 800;
            var height = 800;
            var svg = d3.select('body')
                    .append('svg')
                    .attr('width',width)
                    .attr('height',height)
                        .append('g')
                            .attr('transform','translate(200,0)')
            // 2、生成树状布局，设置树图布局容器尺寸。
            var tree = d3.layout.tree()
            // .size([360, 320]);
            .size([500, 450]);

            // let root = tree(d3.hierarchy(teeeData));
            // // 获取节点数组
            // root.descendants()
            // // 获取links数组
            // root.links()

            // 3、对角线生成器,并旋转90度。
            var diagonal  = d3.svg.diagonal()
                    .projection(d=> [d.y,d.x]);  //横纵坐标对调(x,y) => (y,x)        
            // 4、请求数据：
                d3.json('treeData.json',function(error,root){
                    // 4.1获取nodes节点数组和links连线数组。
                    var nodes = tree.nodes(root);
                    var links = tree.links(nodes);
                    // 4.2生成连线。
                    var link = svg.selectAll('.link')
                            .data(links)
                            .enter()
                            .append('path')
                            .attr('class','link')
                            .attr('d',diagonal)    
                    // 4.3生成节点。
                    var node = svg.selectAll('.node')
                            .data(nodes)
                            .enter()
                            .append('g')
                            .attr('class','node')
                            .attr('transform',function(d){
                                return 'translate('+d.y+','+d.x+')'
                            })    
                                
                    // 4.4给节点添加圆圈，设置半径。
                    node.append('circle')
                        .attr('r',5)
                    // 4.5给节点添加文本，设置文本的样式位置。
                    node.append('text')
                        .text(d=>d.name)
                        .attr('dx',d=> d.children? -15:15)
                        .attr('dy',5)
                        .attr('text-anchor',d=> d.children? 'end':'start');
                })
                  
        </script>
    </body>
</html>
